<template>
  <div class="mod-config">
    <el-row>
      <el-button type="primary" v-if="isAuth('companyprofile:update')" @click="editMessage()">{{ addOrUpdateVisible ? '保存简介' : '编辑简介' }}</el-button>
      <el-button type="primary" v-if="isAuth('companyprofile:save')" @click="editImage()">{{ uploadVisible ? '保存轮播图' : '编辑轮播图' }}</el-button>
      <el-button type="primary" @click="showEnglish = !showEnglish">{{ showEnglish ? '切换中文' : '切换英文' }}</el-button>
    </el-row>

    <!--公司简介-->
    <div class="companyProfileShow">
      <p>公司简介</p>
      <div v-html="richText.content" v-if="!showEnglish"></div>
      <div v-html="richText.englishContent" v-else></div>
    </div>

    <!--轮播图-->
    <div>
      <p>轮播图</p>
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item class="carouselShow" v-for="(item, index) in imagesFiles" :key="index">
          <img :src="item.url" class="carouselImg" alt="">
          <div class="deleteModel">
              <span class="carousel-delete" @click="deleteImage(item)">
                <i class="el-icon-delete"></i>
              </span>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!--弹出层-->
    <el-dialog id="companyLayer"  title="公司简介"  :visible.sync="addOrUpdateVisible" width="85%" :before-close="handleClose">
      <add-or-update ref="addOrUpdate" :richText="richText" @refreshDataList="getDataList"></add-or-update>
    </el-dialog>
    <el-dialog title="上传文件"  :visible.sync="uploadVisible" :before-close="handleClose">
      <upload-image ref="upload" :paramsData="params"  @uploadImageData="getUploadImage"></upload-image>
    </el-dialog>

  </div>
</template>

<script>
  import AddOrUpdate from './companyprofile-add-or-update'
  import uploadImage from '../../../components/uploadFile/uploadImage'
  import { getInterface } from '../../../../utils/api'

  export default {
    inject: ['reload'],
    data () {
      return {
        addOrUpdateVisible: false,
        uploadVisible: false,
        showEnglish: false,
        params: {
          filename: 'file',
          recordId: 1,
          attachType: 'COMPANY_PROFILE_001'
        },
        imagesFiles: [],
        richText: {
          content: '',
          englishContent: ''
        }
      }
    },
    components: {
      AddOrUpdate, uploadImage
    },
    created () {
      this.init()
    },
    methods: {
      init () {
        this.$http({
          url: getInterface.aboutUs.companyProfileInfo,
          method: 'post'
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.richText.content = data.companyProfile.primaryResources
            this.richText.englishContent = data.companyProfile.primaryResourcesEnglish
            this.imagesFiles = data.files
          }
        }).catch()
      },
      editMessage () {
        this.addOrUpdateVisible = !this.addOrUpdateVisible
      },
      getDataList () {
        this.addOrUpdateVisible = !this.addOrUpdateVisible
      },
      deleteImage (item) {
        let start = item.url.indexOf('file/')
        let params = item.url.substring(start + 5)
        this.$http({
          method: 'post',
          url: getInterface.deleteImage,
          data: this.$http.adornData({
            'fileName': params
          })
        })
          .then(({data}) => {
            if (data && data.code === 0) {
              this.imagesFiles.splice(this.imagesFiles.indexOf(item), 1)
              this.$message({
                message: '图片删除成功',
                type: 'success'
              })
            }
          })
      },
      handleClose (done) {
        this.$confirm('确认关闭？')
         .then(() => {
           this.reload()
           done()
         }).catch(_ => {})
      },
      editImage () {
        this.uploadVisible = true
        this.$nextTick(() => {
          this.$refs.upload.init()
        })
      },
      getUploadImage () {
        this.uploadVisible = !this.uploadVisible
      }
    }
  }
</script>
<style scoped lang="scss">
  .el-row{
    margin: 15px 0;
    padding-bottom: 15px;
    border-bottom: 3px solid #15b2a2;
  }
  p{
    font-size: 18px;
    margin-bottom: 0;
  }
  .el-carousel__item{
    h3{
      color: #475669;
      font-size: 18px;
      opacity: 0.75;
      line-height: 300px;
      margin: 0;
    }
    &:nth-child(2n) {
      background-color: #99a9bf;
    }
    &:nth-child(2n+1) {
      background-color: #d3dce6;
    }
  }
  .companyProfileShow {
    margin-bottom: 80px;

    > div{
      width: 800px;
      margin: 30px 15px;
    }
  }
  .carouselShow{
    &:hover .deleteModel{
      display: block;
    }
    .deleteModel{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      background-color: rgba(0, 0, 0, .5);
      text-align: center;
      color: #fff;
      font-size: 18px;
      line-height: 200px;
      cursor: pointer;
      display: none;
    }
  }

</style>
<style>
  #companyLayer .el-dialog .el-dialog__body{
    padding-top: 0 !important;
  }
</style>
